<template>
	<view class="c-tabs">
		<view class="c-tabs-title">
			<template v-for="item in titles" @click="tabclick(item)">
				<view ref="btn" :class="`c-tabs-title-btn ${value === item.val?'is-current':''} btn-${item.val}`"
					throttle-time="0" @tap="tabclick(item,$event)">
					{{item.lab}}
				</view>
			</template>
			<view class="title-active-bar" :style="`left: ${titleBar.left}px;width:${titleBar.with}px;`">

			</view>
		</view>
		<view class="c-tabs-body" :val="value"> 
			<slot></slot>
		</view>
		<!-- <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<slot></slot>
		</swiper> -->
	</view>
</template>

<script>
	export default {
		name: "c-tabs",
		props: {
			value: {
				default: ''
			}
		},
		model: {
			prop: 'value', // 此处的value为父组件v-model绑定数据
			event: 'tabClick'
		},
		data() {
			return {
				current: this.value,
				titleBar: {
					left: 0,
					with: 0
				}
			};
		},
		mounted() {
			this.barOnload()
		},
		watch:{
			value:{
				handler(a,b){
					this.barOnload()
				},
			},
		},
		computed: {
			// 筛选出标题头部
			titles() {
				if (!this.$slots.default.length) {
					return []
				}
				return this.$slots.default.map((m, index) => {
					if (m.data.attrs.label != undefined) {
						return {
							lab: m.data.attrs.label,
							val: m.componentOptions.propsData.name
						}
					} else {
						return ''
					}
				})
			}
		},
		methods: {
			// tabs按钮点击事件
			tabclick(item, e) {
				if (item.val === this.value) {
					return
				}
				this.$emit('tabClick', item.val, item)
			},
			// 
			changeBarLeft() {
				// 获取当前元素的节点信息
				uni.createSelectorQuery().select('.btn-' + this.value).fields({
					rect: true,
					size: true
				}, res => {
					const left = res.left; // 元素相对于页面左侧的位置
					// 获取父级元素的节点信息
					uni.createSelectorQuery().select('.c-tabs-title').fields({
						rect: true,
						size: true
					}, res => {
						// res包括了父级元素的位置、宽高等信息
						const parentLeft = res.left; // 父级元素相对于页面左侧的位置
						// 计算当前元素相对于父级元素的位置
						const relativeLeft = left - parentLeft; // 当前元素相对于父级元素左侧的位置
						this.titleBar.left = relativeLeft
					}).exec();
				}).exec();
			},
			// 改变滚动条的宽度
			changeBarWidth() {
				console.log(this.value,'tabs');
				uni.createSelectorQuery().select('.btn-' + this.value).boundingClientRect(data => {
					this.titleBar.with = data.width
				}).exec()
			},
			barOnload() {
				this.changeBarWidth()
				this.changeBarLeft()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.c-tabs {

		.c-tabs-title {
			display: flex;
			position: relative;
			transition: 0.3s;

			.c-tabs-title-btn {
				background-color: #fff;
				color: #91909A;
				padding: 22rpx;

				&+.c-tabs-title-btn {
					margin-left: 20rpx;
				}

				&.is-current {
					color: #2934D0;
				}
			}

			.title-active-bar {
				position: absolute;
				border-bottom: 4rpx solid #2934D0;
				width: 50rpx;
				bottom: 0;
				transition: .3s;
			}
		}

		.c-tabs-body {
			position: relative;
			padding-top: 20rpx;

			// height: 200rpx;
			/deep/ >uni-swiper-item {
				position: static !important;
			}
		}
	}
</style>
